﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>7天天气预报</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
   <script src="axios.min.js"></script>
</head>
<body>
        <div id="app">
            <div class="hello">
                <h2>{{city}}</h2>
                <h4>今天:{{date}} {{week}}</h4>
                <h4>{{message}}</h4>
                <ul>
                    <li v-for="item in obj">
                        <div>
                            <h3>{{item.date}}</h3>
                            <h3>{{item.week}}</h3>
                            <img :src="get(item.wea_img)" alt="">
                            <h3>{{item.wea}}</h3>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        
        <script>
            const vm = Vue.createApp({
                name: 'HelloWorld',
                data() {
                    return {
                        city: "",
                        obj: [],
                        date: "",
                        week: "",
                        message: ""
                    }
                },
                methods: {
                    //定义get方法，拼接图片的路径
                    get(sky) {
                        return "https://xintai.xianguomall.com/skin/pitaya/" + sky + ".png"
                    }
                },
                created() {
                    var that = this;
                    axios.get("http://gfeljm.tianqiapi.com/api?unescape=1&version=v9&appid=94671344&appsecret=dK4nkK33&city=北京")
                        .then(function(response) {
                            //处理数据
                            that.city = response.data.city;
                            that.obj = response.data.data;
                            that.date = response.data.data[0].date;
                            that.week = response.data.data[0].week;
                            that.message = response.data.data[0].air_tips;
                        })
                        .catch(function(error) {
                            console.log(error)
                        })
                }
            }).mount("#app");
        </script>
        <style scoped>
            h2,
            h4 {
                text-align: center;
            }
            li {
                float: left;
                list-style-type: none;
                width: 200px;
                text-align: center;
                border: 1px solid red;
            }
        </style>
        </div>
    </body>
</html>